<template>
    <el-dialog title="选择物料需求表" :visible.sync="dialogVisible" width="1000px" @close="handleClose" append-to-body
        modal-append-to-body>

        <el-table v-loading="loading" :data="filteredMaterialList" @selection-change="handleSelectionChange" border
            stripe>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="物料编码" align="center" prop="materialCode" width="140" />
            <el-table-column label="物料名称" align="center" prop="materialName" width="120" />
            <el-table-column label="规格" align="center" prop="specification" width="100" />
            <!-- 新增字段1：供应商（采购关联关键信息） -->
            <el-table-column label="供应商" align="center" prop="supplier" width="140" />
            <!-- 新增字段2：生产厂家（质量追溯关键信息） -->
            <el-table-column label="生产厂家" align="center" prop="manufacturer" width="140" />
            <!-- 新增字段3：厂家批号（物料唯一标识，用于追溯） -->
            <el-table-column label="厂家批号" align="center" prop="manufacturerBatchNumber" width="120" />
            <!-- 新增字段4：收货日期（时效性判断） -->
            <el-table-column label="收货日期" align="center" prop="receiptDate" width="120" />
            <!-- 新增字段5：有效期（过期预警关键信息） -->
            <el-table-column label="有效期至" align="center" prop="expirationDate" width="120">
                <!-- 有效期高亮：过期/即将过期标红，提升视觉提醒 -->
                <template slot-scope="scope">
                    <span :class="{ 'text-red': isExpired(scope.row.expirationDate) }">
                        {{ scope.row.expirationDate }}
                    </span>
                </template>
            </el-table-column>
            <!-- 新增字段6：存储条件（合规使用关键信息） -->
            <el-table-column label="存储条件" align="center" prop="storageCondition" width="100" />
            <!-- 新增字段7：合格数量（库存可用量判断） -->
            <el-table-column label="合格数量" align="center" prop="qualifiedQuantity" width="100" />
            <!-- 新增字段8：收货状态（区分物料是否可用） -->
            <el-table-column label="收货状态" align="center" prop="receiptStatus" width="100">
                <!-- 状态文字映射：将数字状态转为中文，提升可读性 -->
                <template slot-scope="scope">
                    <el-tag :type="getStatusTagType(scope.row.receiptStatus)">
                        {{ getReceiptStatusText(scope.row.receiptStatus) }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
            @pagination="handlePageChange" />

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmSelection">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getAllMaterial } from "@/api/material/MaterialRecord";
import Pagination from '@/components/Pagination';

export default {
    name: "MaterialSelectDialog",
    components: {
        Pagination
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            materialList: [], // 存储所有物料
            filteredMaterialList: [], // 存储过滤后的物料
            total: 0,
            currentPage: 1,
            pageSize: 10,
            queryParams: {
                materialName: "",
                supplier: "" // 新增：供应商筛选参数
            },
            selectedMaterials: [],
            // 收货状态映射：根据实际业务调整文字（若后端有枚举，建议与后端保持一致）
            receiptStatusMap: {
                1: "待验收",
                2: "已验收",
                3: "已拒收"
            },
            // 状态标签类型映射：不同状态对应不同颜色
            statusTagTypeMap: {
                1: "info",    // 待验收-蓝色
                2: "success", // 已验收-绿色
                3: "danger"   // 已拒收-红色
            }
        };
    },
    methods: {
        // 从后端获取所有物料（原有逻辑不变）
        getMaterialList() {
            this.loading = true;
            getAllMaterial()
                .then((response) => {
                    console.log("物料列表请求成功：", response);
                    this.materialList = response.data || [];
                    this.total = this.materialList.length;
                    this.filterMaterialList();
                    this.loading = false;
                })
                .catch(error => {
                    this.loading = false;
                    console.error('获取物料列表失败：', error);
                    this.$message.error('获取物料失败，请稍后重试');
                });
        },
        // 前端过滤和分页（新增供应商筛选逻辑）
        filterMaterialList() {
            let result = [...this.materialList];

            // 1. 按物料名称过滤
            if (this.queryParams.materialName) {
                const keyword = this.queryParams.materialName.toLowerCase();
                result = result.filter(item =>
                    item.materialName.toLowerCase().includes(keyword)
                );
            }

            // 2. 新增：按供应商过滤
            if (this.queryParams.supplier) {
                const supplierKeyword = this.queryParams.supplier.toLowerCase();
                result = result.filter(item =>
                    item.supplier.toLowerCase().includes(supplierKeyword)
                );
            }

            // 分页处理
            this.total = result.length;
            const startIndex = (this.currentPage - 1) * this.pageSize;
            this.filteredMaterialList = result.slice(startIndex, startIndex + this.pageSize);
        },
        // 重置过滤条件（新增供应商参数重置）
        resetFilter() {
            this.queryParams = {
                materialName: "",
                supplier: "" // 重置供应商筛选
            };
            this.currentPage = 1;
            this.filterMaterialList();
        },
        // 分页变化（原有逻辑不变）
        handlePageChange() {
            this.filterMaterialList();
        },
        // 选中物料变化（原有逻辑不变）
        handleSelectionChange(selection) {
            this.selectedMaterials = selection;
        },
        // 确认选择（原有逻辑不变）
        confirmSelection() {
            if (this.selectedMaterials.length === 0) {
                this.$message.warning("请选择至少一个物料");
                return;
            }
            // 触发事件，将选中的物料传递给父组件
            this.$emit("material-selected", this.selectedMaterials);
            this.dialogVisible = false;
        },

        // 关闭对话框（原有逻辑不变）
        handleClose() {
            this.$emit("dialog-closed");
            this.resetFilter();
            this.selectedMaterials = [];
        },
        // 显示对话框（原有逻辑不变）
        show() {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.getMaterialList();
            });
        },
        // 新增：判断物料是否过期（有效期高亮逻辑）
        isExpired(expirationDate) {
            if (!expirationDate) return false;
            // 将有效期字符串转为日期对象，与当前日期对比
            const expireDate = new Date(expirationDate);
            const today = new Date();
            // 忽略时间，只比较日期（避免当天未过期却标红）
            expireDate.setHours(0, 0, 0, 0);
            today.setHours(0, 0, 0, 0);
            // 过期（有效期<=今天）或即将过期（有效期-今天<=7天）标红
            const daysDiff = Math.ceil((expireDate - today) / (1000 * 60 * 60 * 24));
            return daysDiff <= 0 || daysDiff <= 7;
        },
        // 新增：获取收货状态中文文本
        getReceiptStatusText(status) {
            return this.receiptStatusMap[status] || `未知状态(${status})`;
        },
        // 新增：获取收货状态标签类型（颜色）
        getStatusTagType(status) {
            return this.statusTagTypeMap[status] || "default";
        }
    },
};
</script>

<style scoped>
.el-dialog {
    z-index: 3000 !important;
    /* 提高层级，确保在其他元素之上 */
}

/* 新增：过期/即将过期文字样式 */
.text-red {
    color: #F56C6C;
    font-weight: 500;
}

/* 优化表格样式：表头背景色 */
.el-table th {
    background-color: #F5F7FA !important;
}
</style>